<template>
	<view class="user-container">
		<view class="title">
			<view>我的</view>
		</view>
		<scroll-view class="pet-scroll" scroll-x>
			<view class="pet-list">
				<view>
					<view class="pet-avatar add" @click="addPet">
					<view class="add-icon">+</view>
					
				</view>
				<view class="pet-name">添加宠物</view>

				</view>
		
				
				<view v-for="(pet, idx) in pets" :key="pet.id" class="pet-avatar" :class="{ selected: selectedPet === pet.id }"
					@click="selectPet(pet.id)">
					<image class="pet-img" :src="pet.img" mode="aspectFill" />
					<view class="pet-name">{{ pet.name }}</view>
					<view v-if="selectedPet === pet.id" class="pet-check">
						<text class="tn-icon-check"></text>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="menu-list">
			<cell label="个人账户管理" arrow @onFormat="goAccount"></cell>
			<cell label="宠物信息管理" arrow @onFormat="goPetInfo"></cell>
			<cell label="设置" arrow @onFormat="goSetting"></cell>
		</view>
		<tn-tabbar v-model="currentIndex" @change="changeTabbar" height="120" bgColor="#000"  inactiveColor="#fff" activeColor="#fff" :list="tabbarList"></tn-tabbar>

	</view>
</template>

<script>
import Cell from '../component/cell.vue'
export default {
	components: {
		Cell
	},
	data() {
		return {
			pets: [
				{ id: 1, name: '小咪', img: '/static/image/maotou.jpg' },
				{ id: 2, name: '小咪', img: '/static/image/cat2.jpg' },
				{ id: 3, name: '小咪', img: '/static/image/cat3.jpg' },
				{ id: 4, name: '小咪', img: '/static/image/cat4.jpg' },
				{ id: 4, name: '小咪', img: '/static/image/cat4.jpg' },
				{ id: 4, name: '小咪', img: '/static/image/cat4.jpg' },
				{ id: 4, name: '小咪', img: '/static/image/cat4.jpg' },
				{ id: 4, name: '小咪', img: '/static/image/cat4.jpg' },

			],
			tabbarList: [{
            title: '首页',
            activeIcon: '/static/image/tabbar/homea.png',
            inactiveIcon: '/static/image/tabbar/home.png'
          },
          {
            title: '数据',
           activeIcon: '/static/image/tabbar/dataa.png',
            inactiveIcon: '/static/image/tabbar/data.png'
          },
     
          {
            title: '摄影',
            activeIcon: '/static/image/tabbar/shexianga.png',
            inactiveIcon: '/static/image/tabbar/shexiang.png'
          },
          {
            title: '我的',
          activeIcon: '/static/image/tabbar/mya.png',
            inactiveIcon: '/static/image/tabbar/my.png'
          }
        ],
				currentIndex:3,
			selectedPet: 1
		}
	},
	methods: {
		changeTabbar(index) {
			if(index == 0) {
				uni.redirectTo({
					url: '/pages/index/index'
				})
			} else if(index == 1) {
				uni.redirectTo({
					url: '/pages/data/index'
				})
			}else if(index == 2) {
				uni.redirectTo({
					url: '/pages/video/index'
				})
			}
			else if(index == 3) {
				uni.redirectTo({
					url: '/pages/user/index'
				})
			}
		},
		addPet() {
			uni.navigateTo({
				url: '/pages/register/add'
			})
		 },
		selectPet(id) {
			this.selectedPet = id
		},
		goAccount() { 
			uni.navigateTo({
				url: '/pages/user/userinfo'
			})
		},
		goPetInfo() { 
			uni.navigateTo({
				url: '/pages/user/petInfo'
			})
		},
		goSetting() { 
			uni.navigateTo({
				url: '/pages/user/setting'
			})
		}
	}
}
</script>

<style scoped>
.title {
	font-size: 46rpx;
	font-weight: bold;
	margin-left: 32rpx;
	margin-bottom: 0rpx;
  margin-top: 32rpx;
	color: #111;
	margin-top: 60px;
}
.user-container {
	min-height: 100vh;
	background: #fff;
	padding: 0;
}

.pet-scroll {
	margin-top: 40px;
	width: 100vw;
	overflow-x: scroll;
	white-space: nowrap;
	padding: 0 0 0 0;
}

.pet-list {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	padding: 24rpx 0 32rpx 24rpx;
	gap: 24rpx;
}

.pet-avatar {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-right: 8rpx;
	position: relative;
	flex-shrink: 0;

}

.pet-avatar.add {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background: #f5f5f5;
	align-items: center;
	justify-content: center;
	display: flex;
}

.add-icon {
	font-size: 44rpx;
	color: #bbb;
}

.pet-img {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	object-fit: cover;
	background: #eee;
}

.pet-name {
	font-size: 29rpx;
	color: #333;
	margin-top: 8rpx;
}

.pet-avatar.selected .pet-img {
	border: 3rpx solid #1ecb8c;
}

.pet-avatar.selected .pet-check {
	position: absolute;
	right: 0;
	bottom: 38rpx;
	background: #1ecb8c;
	width: 32rpx;
	height: 32rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 24rpx;
	border: 2rpx solid #fff;
}

.menu-list {
	margin-top: 32rpx;
}

.menu-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx 24rpx;
	border-bottom: 1rpx solid #f2f2f2;
	font-size: 30rpx;
	color: #111;
}

.menu-arrow {
	font-size: 32rpx;
	color: #bbb;
}
</style>